<template>
  <a-card :loading="loading" :bordered="false">
    <template #title>
      <a-space>
        <h2 style="margin: 0">{{ post.title }}</h2>
        <a-tag v-for="t in post.tags" :key="t">{{ t }}</a-tag>
      </a-space>
    </template>

    <!-- 操作 -->
    <a-space style="margin-bottom: 16px">
      <a-button type="text" @click="doThumb">
        <icon-thumb-up /> {{ post.thumbNum }}
      </a-button>
      <a-button type="text" @click="doFavour">
        <icon-star /> {{ post.favourNum }}
      </a-button>
      <a-button
        v-if="isMine"
        type="text"
        @click="router.push(`/post/edit/${id}`)"
        >编辑</a-button
      >
      <a-popconfirm v-if="isMine" content="确认删除？" @ok="doDelete">
        <a-button type="text" status="danger">删除</a-button>
      </a-popconfirm>
    </a-space>

    <a-typography-paragraph :copyable="true">
      {{ post.content }}
    </a-typography-paragraph>
  </a-card>
</template>

<script setup lang="ts">
import { getPostVoByIdUsingGet, deletePostUsingPost } from "@/api/postController";
import { doThumbUsingPost } from "@/api/postThumbController";
import { doPostFavourUsingPost } from "@/api/postFavourController";
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted, computed } from "vue";
import { Message } from "@arco-design/web-vue";
import { useLoginUserStore } from "@/store/userStore";

const route = useRoute();
const router = useRouter();
const id = Number(route.params.id);

const post = ref<any>({});
const loading = ref(true);

const loginUserStore = useLoginUserStore();
const isMine = computed(
  () => post.value.userId === loginUserStore.loginUser.id
);

onMounted(async () => {
  const { data } = await getPostVoByIdUsingGet({ id });
  if (data.code === 0) post.value = data.data;
  loading.value = false;
});

async function doThumb() {
  const { data } = await doThumbUsingPost({ postId: id });
  if (data.code === 0) post.value.thumbNum = data.data;
}
async function doFavour() {
  const { data } = await doPostFavourUsingPost({ postId: id });
  if (data.code === 0) post.value.favourNum = data.data;
}
async function doDelete() {
  const { data } = await deletePostUsingPost({ id });
  if (data.code === 0) {
    Message.success("删除成功");
    router.push("/post");
  }
}
</script>
